<template>
  <section class="whaleyVR">
    <div class="whaley-brand ">
      <p class="title whaleyVR-title">
        <span class="text">共享资源 | 海量内容：</span>
      </p>
      <p class="subtitle">
        <span class="label">共享CMC华人文化体系内的媒体</span>
        <span class="pipe">&middot;</span>
        <span class="label">内容</span>
        <span class="pipe">&middot;</span>
        <span class="label">资源</span>
      </p>
      <div class="ip-list">
        <img src="../assets/images/logo_11.jpg" alt="">
        <img src="../assets/images/logo_12.jpg" alt="">
        <img src="../assets/images/logo_13.jpg" alt="">
        <img src="../assets/images/logo_14.jpg" alt="">
        <img src="../assets/images/logo_21.jpg" alt="">
        <img src="../assets/images/logo_22.jpg" alt="">
        <img src="../assets/images/logo_23.jpg" alt="">
        <img src="../assets/images/logo_24.jpg" alt="">
        <img src="../assets/images/logo_31.jpg" alt="">
        <img src="../assets/images/logo_32.jpg" alt="">
        <img src="../assets/images/logo_33.jpg" alt="">
        <img src="../assets/images/logo_34.jpg" alt="">
      </div>
      <div class="partners">
        <p class="subtitle">
          <span class="label">海量第三方合作伙伴</span>
        </p>
        <img src="../assets/images/logo_all.jpg" alt="" class="partners-logo">       
      </div>
    </div>
    <slot></slot>
  </section>
</template>

<style lang="scss" scoped>
  $border-color: #2b60b7;

  .whaley-brand {
    position: relative;
    margin: 0 auto;
    .title {
      margin-left: .1rem;
    }
    .subtitle {
      margin: .25rem .8rem;
      font-size: 0;
      .label {
        display: inline-block;
        font-size: .36rem;
        color: #63bbff;
        line-height: 1;
        vertical-align: .2rem;
      }
      .pipe {
        display: inline-block;
        font-size: .56rem;
        color: #63bbff;
        margin: 0 .2rem;
        line-height: 1;
        vertical-align: .15rem;
      }      
    }
  }
  .ip-list {
    padding: .12rem .87rem 0;
    overflow: hidden;
    font-size: 0;
    img {
      margin: 0 .35rem .32rem;
      width: 1.52rem;
      height: 1.52rem;
      border-radius: 50%;
    }
  }
  .partners {
    padding: .4rem 0 0;
    .partners-logo {
      margin: 0 1.26rem 0 1.23rem;
      max-width: 8.33rem;
      clip-path: polygon(0 0, 100% 0, 100% 100%, .3rem 100%, 0 94%);
    }
  }
</style>
